<template>
    <!-- 为 div 添加一个类名 hide-scrollbar 用于隐藏滚动条 -->
    <div class="bg-#18181C h-full   pt-1.4rem pb-20rem overflow-auto hide-scrollbar relative"
        @touchstart="dragStart($event, 'store')" @touchend="dragEnd($event, 'store')">
        <n-tabs type="line" animated :bar-width="52" @update:value="setTab">
            <n-tab-pane name="TAB_DISCOVER" tab="发现音乐" class="h-full " display-directive="show:lazy">
                <div class="pl-4.8rem h-full">
                    <n-carousel :slides-per-view="2.5" :space-between="0" :loop="false" draggable :show-dots="false"
                        @touchstart.stop="dragStart($event, 'randomPlayList')"
                        @touchend.stop="dragEnd($event, 'randomPlayList')">
                        <template v-for="(item, index) in Array.from({ length: 10 })" :key="index">
                            <div class="w-34.6rem h-21.7rem" @click="playMusic(-1)">
                                <SvgIcon class="w-34.6rem h-21.7rem text-white cursor-pointer"
                                    :local-icon="index % 2 == 0 ? 'music-gedan1' : 'music-gedan2'" />
                            </div>
                        </template>
                    </n-carousel>
                    <div class="text-2.8rem text-white mt-4rem ">能量充电</div>
                    <div class="flex">
                        <n-carousel :slides-per-view="4.1" :space-between="0" :loop="false" draggable :show-dots="false"
                            @touchstart.stop="dragStart($event, 'storeList')"
                            @touchend.stop="dragEnd($event, 'storeList')" key="1">
                            <template v-for="item in musicMap">
                                <div class="flex flex-col mt2.5rem" @click="playMusic(item.id)">
                                    <img class="w-18.4rem h-19.5rem text-white cursor-pointer" :src="item.img">
                                    <div class="text-2.2rem text-white mt-1.4rem">{{ item.name }}</div>
                                    <div class="text-1.8rem text-#FFFFFF99 mt-0.8rem">{{ item.auther }}</div>
                                </div>
                            </template>
                        </n-carousel>
                    </div>
                    <div class="text-2.8rem text-white mt-4rem " id="touchBug">专属电台</div>
                    <div class="flex">
                        <n-carousel :slides-per-view="4.1" :space-between="0" :loop="false" draggable :show-dots="false"
                            @touchstart.stop="dragStart($event, 'storeList')"
                            @touchend.stop="dragEnd($event, 'storeList')" key="2">
                            <template v-for="item in reversedMusicMap">
                                <div class="flex flex-col mt2.5rem" @click="playMusic(item.id)">
                                    <img class="w-18.4rem h-19.5rem text-white cursor-pointer" :src="item.img">
                                    <div class="text-2.2rem text-white mt-1.4rem">{{ item.name }}</div>
                                    <div class="text-1.8rem text-#FFFFFF99 mt-0.8rem">{{ item.auther }}</div>
                                </div>
                            </template>
                        </n-carousel>
                    </div>
                </div>
            </n-tab-pane>
            <n-tab-pane name="TAB_FAVORITE" tab="我的收藏" display-directive="show">
                <div class="pl-4.8rem">
                    <div class="text-2.8rem text-white mt-4rem ">我的收藏</div>
                    <div class="flex flex-wrap">
                        <template v-for="item in musicMap">
                            <div class="flex flex-col mt-2.5rem mr-5rem" @click="playMusic(item.id)">
                                <img class="w-18.4rem h-19.5rem text-white cursor-pointer" :src="item.img">
                                <div class="text-2.2rem text-white mt-1.4rem">{{ item.name }}</div>
                                <div class="text-1.8rem text-#FFFFFF99 mt-0.8rem">{{ item.auther }}</div>
                            </div>
                        </template>
                    </div>
                </div>

            </n-tab-pane>
            <n-tab-pane name="TAB_DOWNLOAD" tab="我的下载" display-directive="show">
                <div class="pl-4.8rem">
                    <div class="text-2.8rem text-white mt-4rem ">我的下载</div>
                    <div class="flex flex-wrap">
                        <template v-for="(item) in reversedMusicMap">
                            <div class="flex flex-col mt-2.5rem mr-5rem" @click="playMusic(item.id)">
                                <img class="w-18.4rem h-19.5rem text-white cursor-pointer" :src="item.img">
                                <div class="text-2.2rem text-white mt-1.4rem">{{ item.name }}</div>
                                <div class="text-1.8rem text-#FFFFFF99 mt-0.8rem">{{ item.auther }}</div>
                            </div>
                        </template>
                    </div>
                </div>

            </n-tab-pane>
        </n-tabs>

        <div @click="setShowSearch" class="w-2.6rem h-3rem absolute right-3.5rem top-3.5rem z-10 cursor-pointer">
            <SvgIcon class="w-2.6rem h-3rem " local-icon="search" />
        </div>

        <Search v-model:show="showSearch"></Search>
    </div>
</template>
<script lang="ts" setup>
import { computed, ref } from 'vue';
import { musicMap } from '../player/music'
import { emitter } from '@/utils/mitt';
import Search from './common/search.vue';
import { dragStartFn, dragEndFn } from "@/hooks/business/drag";

import { MusicWidget, eventMusic, MusicAction } from "@/hooks/business/eventListen/musicEventListen";
import { touchEventData } from "@/hooks/business/eventListen/event";

const showSearch = ref(false)
const reversedMusicMap = computed(() => [...musicMap].reverse())

function playMusic(id: number) {
    emitter.emit("playMusic", {
        id, fn: (name: string) => {
            if (id === -1) {
                eventMusic(MusicAction.Click, MusicWidget.MusicStoreRandomPlayItem, MusicWidget.MusicStoreRandomPlayItem, MusicWidget.MusicStoreRandomPlayItem, name);
            } else {
                eventMusic(MusicAction.Click, MusicWidget.MusicStoreItem, MusicWidget.MusicStoreItem, MusicWidget.MusicStoreItem, name);
            }
        }
    });
}

function setShowSearch() {
    eventMusic(MusicAction.Click, MusicWidget.SearchInputIcon, MusicWidget.SearchInputIcon, MusicWidget.SearchInputIcon);
    showSearch.value = !showSearch.value
}

function setTab(value: string) {
    eventMusic(MusicAction.Click, MusicWidget.MusicStoreTabItem, MusicWidget.MusicStoreTabItem, MusicWidget.MusicStoreTabItem, value);
}

function dragStart(e: TouchEvent, type: string) {
    dragStartFn(e)
}

function dragEnd(e: TouchEvent, type: string) {

    dragEndFn(e, (data: touchEventData) => {
        if (data.value == 0) {
            return;
        }
        if (data.type === 'swipe') {
            if (type === 'store') {
                eventMusic(MusicAction.Swipe, MusicWidget.MusicStore, MusicWidget.MusicStore, MusicWidget.MusicStore, data);
            } else if (type === 'randomPlayList') {
                eventMusic(MusicAction.Swipe, MusicWidget.MusicStoreRandomPlayList, MusicWidget.MusicStoreRandomPlayList, MusicWidget.MusicStoreRandomPlayList, data);
            } else if (type === 'storeList') {
                eventMusic(MusicAction.Swipe, MusicWidget.MusicStoreList, MusicWidget.MusicStoreList, MusicWidget.MusicStoreList, data);
            }
        }
    })

    setTimeout(() => {
        // 解决Naive手指滑动的BUG，确保在拖动结束后，滑动事件结束
        const el = document.getElementById('touchBug');
        if (el) {
            const mouseUpEvent = new MouseEvent('mouseup', {
                bubbles: true,
                cancelable: true,
                view: window
            });
            el.dispatchEvent(mouseUpEvent);
        }
    }, 100);
}


</script>
<style scoped>
/* 隐藏滚动条样式 */
.hide-scrollbar {
    /* 隐藏 Chrome、Safari 和 Opera 的滚动条 */
    -ms-overflow-style: none !important;
    /* IE 和 Edge */
    scrollbar-width: none !important;
    /* Firefox */
}

.hide-scrollbar::-webkit-scrollbar {
    display: none !important;
    /* Chrome、Safari 和 Opera */
}

:deep(.n-tabs-scroll-padding) {
    width: 4.4rem !important
}

:deep(.n-tabs-tab-pad) {
    width: 5.5rem !important
}

:deep(.n-tabs-wrapper) {
    height: 7rem;
}

:deep(.n-tabs-bar) {
    height: 0.5rem;
    bottom: 1px !important;
    border-radius: 2.2rem !important;
    background: rgba(89, 235, 253, 1);
}

:deep(.n-tabs-tab) {
    font-size: 20px;
    letter-spacing: 0px;
    line-height: 28.96px;
    color: rgba(255, 255, 255, 0.5);
}

:deep(.n-tabs-tab:hover) {
    color: rgba(255, 255, 255, 0.5) !important;
}

:deep(.n-tabs-tab--active) {
    font-size: 20px;
    letter-spacing: 0px;
    line-height: 28.96px;
    color: rgba(255, 255, 255, 1) !important;
    text-align: left;
    vertical-align: top;
}

:deep(.n-tabs-nav-scroll-content) {
    border: none !important;
}

:deep(.n-tab-pane) {
    border-top: 1px solid #282828;
}
</style>